<template>
	<view class="contain-main-box">
		<navigationTop navigationTitle="门禁详情" :isHome="true" :isBack="true"></navigationTop>
	<view class="main-bg">
		<view class="smoke-detail">
			<view class="mid-body">
				<!-- 门禁信息 -->
				<view class="door-des">
					<u-row :gutter="15" class="marginBottom">
						<u-col :span="5" class="left-door" text-align="right" >
							<image :src="$store.state.baseImg+'/icon/mj.png'"></image>
						</u-col>
						<u-col :span="7">{{optionData.name || "-"}}</u-col>
					</u-row>
					<u-row :gutter="15" class="marginBottom">
						<u-col :span="5" text-align="right" >
							ip：
						</u-col>
						<u-col :span="7">{{infoData.ip || "-"}}</u-col>
					</u-row>
					<u-row :gutter="15" class="marginBottom">
						<u-col :span="5"  text-align="right">
							门编号:
						</u-col>
						<u-col :span="7">
							{{infoData.doorid || "-"}}
						</u-col>
					</u-row>
				</view>
				<view class="text-nor">当前状态</view>
				<view :class="['text-level'+optionData.alarmLevel]" style="text-align: center;">{{deviceStatus(optionData.alarmLevel)}}</view>
				<view class="items-list-wrap">
					<view class="items-list" v-for="(item) in doorData" :key="item.id">
						<u-row :gutter="30" class="marginBottom">
							<!-- <u-col :span="12" text-align="right"></u-col> -->
							<u-col :span="12" text-align="right" class="time">{{item.timeSecond}}</u-col>
						</u-row>
						<u-row :gutter="30" class="marginBottom">
							<u-col :span="5" text-align="right">编号：{{item.accessIndex}}</u-col>
							<u-col :span="7">卡号：{{item.cardno}}</u-col>
						</u-row>
						<u-row :gutter="30" class="marginBottom">
							<u-col :span="5" text-align="right">人员编号：{{item.pin}}</u-col>
							<u-col :span="7">验证方式：{{item.verified}}</u-col>
						</u-row>
						<u-row :gutter="30">
							<u-col :span="5" text-align="right">进出状态：{{item.inoutstate}}</u-col>
							<u-col :span="7">事件类型：{{item.eventtype}}</u-col>
						</u-row>
					</view>	
				</view>
				<view class="page-next" v-if="total > 0">
					<onion-pagination style="justify-content: center;" :page.sync="page" :pageSize="pageSize" :total="total" @changePage="updatePage"></onion-pagination>
				</view>
			</view>
		</view>
		<!-- tabs组件 -->
		<view class="tabs-content">
			<navTab :tabList="tabList" @changeIndex="changeNav" style="margin-bottom: 30rpx;"></navTab>
		</view>
		<!-- tabs组件 -->
		<!-- 轮播盒子 -->
		<view style="height: 560rpx;">
			<AlarmSwiper :swiperData="swiperData" v-if="refreshSwiper"></AlarmSwiper>
		</view>
		<!-- 轮播盒子 -->
	</view>
	</view>				
</template>

<script>
	import {chooseAlarmLevel,handleSwiperGroup,alarmTabs} from "@/common/utils/index.js";
	import navTab from '@/components/navTab/navTab.vue';
	import AlarmSwiper from "@/components/alarmSwiper/index.vue";
	import navigationTop from "@/components/navigationTop/index.vue";
	export default {
		components:{navTab,AlarmSwiper,navigationTop},
		data() {
			return {
				infoData:{},
				page:1,
				pageSize:10,
				total:10,
				optionData:{},
				doorData:[],
				navCurrent:'0', //tab 栏的index
				refreshSwiper:true, //是否重置swiper
				swiperGroup:{}, //swiper组
				swiperData:[], //展示的swiper数组
				tabList:alarmTabs(),
			}
		},
		onLoad(options) {
			this.optionData = {
				...options
			}
			this.getData({
				...this.optionData,
				pageNo:this.page,
				pageSize:this.pageSize
			})
		},
		computed:{
			deviceStatus(){
				return function(val){
					const name = chooseAlarmLevel(val);
					return name
				}
			}
		},
		methods: {
			changeNav(val){
				this.refreshSwiper = false;
				this.navCurrent = val
				this.swiperData = this.swiperGroup[this.navCurrent];
				this.$nextTick(()=>{
					this.refreshSwiper = true
				})
			},
			handleTab_Swiper(res){
				// 给tab栏赋值
				this.tabList.forEach((item)=>{
					res.data.alarmCount.forEach((its)=>{
						if(item.alarmLevel == its.alarmLevel){
							item['count'] = its.r1;
						}
					})
				})
				const swiperData = res.data.alarmList;
				const group = {
					"0":[],
					"1":[],
					"2":[],
					"3":[],
					"4":[]
				}
				const swipers = handleSwiperGroup(group,swiperData,'alarmLevel');
				this.swiperGroup = swipers;
				this.swiperData = this.swiperGroup[this.navCurrent];
			},
			updatePage(val){
				if(this.page == val) return;
				this.page  = val;
				this.getData({
					...this.optionData,
					pageNo:this.page,
					pageSize:this.pageSize
				})
			},
			getData(data){
				uni.showLoading({
				    title: '加载中',
						mask: false
				});
				this.$http.httpRequest({
					url:this.$api.deviceDetails,
					methods:"get",
					data:data,
					abort:true //可中断后续请求
				}).then((res)=>{
					uni.hideLoading()
					if(!res){
						return uni.showToast({
							title:"服务器请求异常",
							icon:"none"
						})
					}
					if(res.data.deviceDetails.list.length > 0){
						this.infoData = {
							...res.data.deviceDetails.list[0]
						}
					}
					this.total = res.data.deviceDetails.total;
					this.doorData = res.data.deviceDetails.list
					// 给tab栏赋值
					this.handleTab_Swiper(res);
				}).catch((err)=>{
					uni.hideLoading();
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
.tabs-content{
	width: $baseWidth;
	margin: 0 auto;
}
.smoke-detail{
	padding: 80rpx 30rpx;
	background: rgba(255,255,255,0.9);
	min-height: 100%;
}
.mid-body{
	box-shadow: $card-box-shadow;
	border-radius: $card-box-radius;
	min-height: 100%;
	padding: 25rpx;
	.door-des{
		color: $ky-main-color;
	}
}
.marginBottom{
	margin-bottom: 30rpx;
}
.items-list-wrap{
	margin-top: 30rpx;
	margin-bottom: 30rpx;
}
.text-nor{color:$ky-main-color;text-align: center;}
.text-red{color: $dangerColor;text-align: center;}
.left-door image{width: 80rpx;height: 80rpx;}
.items-list .name{color: $ky-main-color;text-align: center;margin-bottom:10rpx;}
.items-list{
	box-shadow: 0 0 10rpx #ccc;
	// box-shadow: $card-box-shadow;
	border-radius: $card-box-radius;
	margin-bottom: 30rpx;
	padding: 30rpx 0;
	color: $ky-main-color;
	&:last-child{
		margin-bottom: 0;
	}
	.time{
		color: #999;
		font-size: 24rpx;
	}
}
.door-wrap{display: flex;}
.right-door .status{
	height: 55rpx;line-height: 55rpx;
}
.status .open{
	color: $dangerColor;
}
.status .close{
	color: $defaultColor;
}
</style>
